<template>
  <div class="flex">
    <div>
      <!-- 脉率 -->
      <Recharts id="heart" :option="heartOption" :type="0"/>

      <!-- 体温 -->
      <Recharts id="temperature" :option="temperatureOption" :type="1"/>
    </div>
    <div class="people mt-6 ml-5 mr-5">
      <img src="@/assets/imgs/people.png" alt="" class="mt-6 m-auto peopleImg"/>
    </div>
    <div>
      <!-- 血氧-->
      <Recharts id="spo2" :option="spO2Option" :type="2"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive, watch} from 'vue'
import Recharts from './Recharts.vue'
import {useLsdStore} from '@/store/modules/lsd'
import {storeToRefs} from 'pinia'
import {toRefs} from 'vue'

const useLsd = useLsdStore()
const {patData} = storeToRefs(useLsd)

// import { ECharts } from 'echarts'
const {proxy} = getCurrentInstance() as any
const echarts = proxy.$echarts

type EChartsOption = echarts.EChartsOption

interface DataType {
  heartOption: EChartsOption
  spO2Option: EChartsOption
  temperatureOption: EChartsOption
}

const data = reactive<DataType>({
  heartOption: {
    grid: {
      left: '4%',
      right: '4%',
      bottom: '10%',
      top: '5%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#000000'
        }
      },
      backgroundColor: '#181C20', // 提示框浮层的背景颜色
      borderColor: '#181C20'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false //去掉折线图中的横线
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    legend: {
      data: ['脉率'],
      left: 'center',
      top: 'bottom',
      icon: 'rect',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: 12,
        color: '#D0E5E2'
      }
    },
    series: [
      {
        name: '脉率',
        data: [],
        type: 'line',
        symbol: 'none', //不要折点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: 'rgba(114, 46, 209, 0)'
            },
            {
              offset: 1,
              color: 'rgba(114, 46, 209, 0.2)'
            }
          ])
        },
        //折线颜色
        lineStyle: {
          color: 'rgba(114, 46, 209, 1)'
        },
        //折点颜色
        itemStyle: {
          color: 'rgba(114, 46, 209, 1)'
        }
      }
    ]
  },
  spO2Option: {
    grid: {
      left: '4%',
      right: '4%',
      bottom: '10%',
      top: '5%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#000000'
        }
      },
      backgroundColor: '#181C20', // 提示框浮层的背景颜色
      borderColor: '#181C20'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false //去掉折线图中的横线
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    legend: {
      data: ['血氧'],
      left: 'center',
      top: 'bottom',
      icon: 'rect',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: 12,
        color: '#D0E5E2'
      }
    },
    series: [
      {
        name: '血氧',
        data: [], //血氧值
        type: 'line',
        symbol: 'none', //不要折点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: 'rgba(245, 49, 157, 0)'
            },
            {
              offset: 1,
              color: 'rgba(245, 49, 157, 0.4)'
            }
          ])
        },
        //折线颜色
        lineStyle: {
          color: 'rgba(245, 49, 157, 1)'
        },
        // //折点颜色
        itemStyle: {
          color: 'rgba(245, 49, 157, 1)'
        }
      }
    ]
  },
  temperatureOption: {
    grid: {
      left: '4%',
      right: '4%',
      bottom: '10%',
      top: '5%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#000000'
        }
      },
      backgroundColor: '#181C20', // 提示框浮层的背景颜色
      borderColor: '#181C20'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false //去掉折线图中的横线
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    legend: {
      data: ['体温'],
      left: 'center',
      top: 'bottom',
      icon: 'rect',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: 12,
        color: '#D0E5E2'
      }
    },
    series: [
      {
        name: '体温',
        data: [],
        type: 'line',
        symbol: 'none', //不要折点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: 'rgba(0, 180, 42, 0)'
            },
            {
              offset: 1,
              color: 'rgba(0, 180, 42, 0.4)'
            }
          ])
        },
        //折线颜色
        lineStyle: {
          color: 'rgba(0, 180, 42, 1)'
        },
        //折点颜色
        itemStyle: {
          color: 'rgba(0, 180, 42, 1)'
        }
      }
    ]
  }
})

const {heartOption, spO2Option, temperatureOption} = toRefs(data)

//监听选择的就诊人变化变化
watch(patData, (newValue) => {
  heartOption.value.xAxis.data = newValue.heartRateVo.heartRateAbscissa
  spO2Option.value.xAxis.data = newValue.spO2Vo.spO2Abscissa
  temperatureOption.value.xAxis.data = newValue.temperatureVo.temperatureVoAbscissa

  heartOption.value.series[0].data = newValue.heartRateVo.heartRateAxis
  spO2Option.value.series[0].data = newValue.spO2Vo.spO2Axis
  temperatureOption.value.series[0].data = newValue.temperatureVo.temperatureVoAxis

})
</script>

<style scoped lang="less">
.people {
  width: 402px;
  height: 854px;
  background-image: url(@/assets/imgs/people_bg.png);
  background-size: cover;
  background-position: center center;
}
</style>
